.active {
		background-color: #31BC8D;
		color: #fff !important;
	}
	.detail{
		
		.container {
			width: 100%;
			height: calc(100% - 63px);
			overflow-y: scroll;
			-webkit-overflow-scrolling: touch;
			.head{
				width: 100%;
				height: 201px;
				position: relative;
				img{
					width: 100%;
					height: 100%;
				}
				.tip{
					width: 115px;
					height: 34px;
					background: rgba(49,188,141,1);
					border-radius: 0px 100px 100px 0px;
					line-height: 34px;
					text-align: center;
					color: #fff;
					position: absolute;
					left: 0;
					bottom: 10px;
				}
			}
			.content{
				width: 100%;
				background-color: #fff;
				padding: 16px 16px 0 16px;
				.price-box{
					display: flex;
					justify-content: space-between;
					margin-bottom: 12px;
					.price{
						color: #969C9E;
						font-size: 12px;
						i{
							color: #F58523;
							font-size: 18px;
							font-weight: 500;
							margin-right: 4px;
						}
					}
				}
				.project-box{
					margin-bottom: 8px;
					.tip{
						display: inline-block;
						height: 18px;
						background:rgba(188,239,227,1);
						border-radius:9px;
						line-height: 20px;
						font-size: 12px;
						color: #31BC8D;
						text-align: center;
						margin-right: 10px;
						padding: 1px 8px;
					}
					.title {
						color: #344047;
					}	
				}
				.subtitle{
					font-size: 12px;
					color: #969C9E;
					margin-bottom: 18px;
				}
				.grade-box{
					.p1{
						color: #5D6164;
						margin-bottom: 10px;
					}
					.p2{
						color: #969C9E;
						font-size: 12px;
						margin-bottom: 10px;
						.weight{
							padding-right: 25px;
							border-right: 1px solid #969C9E;
						}
						.sum {
							padding-left: 25px;
						}
					}
					.p3{
						margin-bottom: 0;
					}
				}
				
			}
			.produce-box{
				width: 100%;
				line-height: 40px;
				display: flex;
				justify-content: space-between;
				padding: 0 16px;
				background-color: #fff;
				margin-bottom: 10px;
				.title-box{
					margin-top: 6px;
					.title{
						margin-right: 26px;
						color: #344047;
						
					}
					.name{
						color: #5D6164;
						position: relative;
						
						i{
							position: relative;
							top: 4px;
							margin-right: 8px;
						}
					}
				}
				.wl{
					color: #969C9E;
					font-size: 12px;
					position: relative;
					margin-top: 6px;
					i{
						position: relative;
						top: 2px;
						right: -2px;
					}
				}
			}
			.product{
				width: 100%;
				height: 108px;
				background-color: #fff;
				padding: 16px;
				.pro-top{
					margin-bottom: 10px;
					.pro-choose{
						color: #344047;
						margin-right: 16px;
					}
					.pro-title {
						color: #969C9E;
						font-size: 12px;
					}
				}
				.pro-flex{
					display: flex;
					// justify-content: space-around;
					
					.inner-box{
						display: flex;
						justify-content: space-around;
						flex-direction: column;
						align-items: center;
						width: 82px;
						height: 42px;
						border: 1px solid #31BC8D;
						border-radius:8px;
						font-size: 12px;
						color: #31BC8D;
						margin-left: 6px;
						&:first-child{
							margin-left: 0;
						}
					}
				}
				
			}
			.pro-details{
				width: 100%;
				img{
					width: 100%;
				}
			}
			
		}
		.footer-wrap{
			background-color: #fff;
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			box-shadow:2px 2px 5px #c2c2c2;
			-webkit-box-shadow:2px 2px 5px #c2c2c2;
			z-index: 2;
			.footer {
				width: 100%;
				height: 63px;
				background-color: #fff;
				padding: 6px 16px 6px 34px;
				.phone{
					height: 100%;
					flex: 1;
					display: flex;
					justify-content: space-around;
					align-items: center;
					flex-direction: column;
					float: left;
					img{
						width: 20px;
					}
					span{
						font-size: 12px;
						color: #969C9E;
					}
				}
				.bind-btn {
					width: 230px;
					background:linear-gradient(94deg,rgba(49,188,141,1) 0%,rgba(166,226,155,1) 100%);
					box-shadow: none;
					float: right;
				}
				
			}
		}
		.meat-alert-container {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: rgba(0, 0, 0, .4);
			.meat-alert-box {
				width: 310px;
				background-color: #fff;
				border-radius: 8px;
				overflow: hidden;
				.meat-alert-box-top {
					width: 100%;
					height: 52px;
					line-height: 52px;
					font-size: 16px;
					color: #344047;
					text-align: center;
					background-color: #F8F8F8;
				}
				.meat-alert-box-center {
					padding: 16px 22px;
					box-sizing: border-box;
					border-bottom: 1px solid #f2f2f2;
					p{
						color: #344047;
						text-indent: 2em;
					}
				}
				.meat-alert-box-bottom {
					width: 100%;
					height: 48px;
					line-height: 48px;
					text-align: center;
					font-size: 16px;
				}
			}
		}
	}
	
	